<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>

    // 入口函数
    // window.onload = function(){
    //     //  给b1按钮添加单击事件
    //     $("#b1").click(function () {
    //         alert("$(\"#b1\").click绑定点击事件..........")
    //     })
    // }

    //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
    $(function () {

    });

    /*
            window.onload  和 $(function) 区别
                * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                * $(function)可以定义多次的。
         */
         function fun1(){
            alert("abc");
        }

        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        //window.onload = fun2;

    $(function () {
    //  给b1按钮添加单击事件
            $("#b1").click(function () {
                alert("jquery入口函数(dom文档加载完成之后执行该函数中的代码)..........")
            })
    });

    $(function () {
        alert("$(function)可以定义多次的。")
    })

    $(function () {
        alert("$(function)可以定义多次的。..")
    })


    // 3. 样式控制：css方法
    $(function () {
        $("#b1").css("background-color","red")
        $("#div1").css("backgroundColor","pink");
    });


</script>

<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" id="b1" value="点我">


</body>
</html>